import Vue from 'vue';

Vue.mixin({
  data: () => ({
    allAnimateBox: []
  }),
  watch: {
    '$store.state.scrollTop'(val) {
      this.setAnimate()
    }
  },
  mounted() {
    document.addEventListener('scroll', this.scrollFn)
    const boxs = document.querySelectorAll('.animate_box')
    const boxArr = Array.from(boxs)
    boxArr.forEach(dom => {
      this.allAnimateBox.push({
        dom,
        in() {
          dom.classList.add("animate_active")
        },
        out() {
          dom.classList.remove("animate_active")
        }
      })
    })
    this.setAnimate()
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.scrollFn)
  },
  methods: {
    scrollFn() {
      window.requestAnimationFrame(() => {
        const top = document.documentElement.scrollTop
        this.$store.commit("M_UPDATE_SCROLLTOP", top)
        this.showBg = top > 10
      })
    },
    setAnimate() {
      if (this.allAnimateBox.length > 0) {
        window.requestAnimationFrame(() => {
          this.allAnimateBox.forEach((item, idx) => {
            console.log(item.dom.getBoundingClientRect().top);
            item.dom.getBoundingClientRect().top < 630 ? item.in() : item.out()
          })
        })
      }
    }
  }
})